import React, {Component} from 'react';
import {message, Row, Col, Avatar, Popover, Icon, Breadcrumb} from 'antd';
import connect from "react-redux/es/connect/connect";
import ajax from '../../util/AjaxUtil';
import {saveValue} from "../../util/StorageUtil";
import './header.less';
import {show_component, collapsed_layout} from "../../util/Constant";
import Global from "../../util/global";
import { withRouter} from 'react-router-dom';

class Header extends Component {

    constructor(props) {
        super(props);
        this.state = {
            userInfo: this.props.userInfo
        };
        Global.registrationMessage("update_head_image", this.updateHeadImage.bind(this));
    }

    updateHeadImage(headImagePath) {
        this.setState({
            userInfo: {
                headSculpture: headImagePath
            }
        });
    }


    render() {

        const headerImageActionContent = (
            <div className={'indexHeaderAction'}>
                <p className={'actionItem'} onClick={this.props.loadEditUserInfo.bind(this)}>个人信息</p>
                <hr className={'indexCationHr'}/>
                <p className={'actionItem'} onClick={this.logout}>退出</p>
            </div>
        );

        if (this.state.userInfo == null) {
            this.state.userInfo = this.props.userInfo;
        }
        let headAvatar = null;
        if (this.props.userInfo && this.props.userInfo.headSculpture) {
            let src = '/userCenter/public/getHeadImage?path=' + this.state.userInfo.headSculpture;
            headAvatar = (
                <Avatar src={src} className={'headerImage'}/>
            );
        } else {
            headAvatar = (
                <Avatar className={'headerImage'} style={{margin: '1px 0'}}>
                    {this.state.userInfo ? this.state.userInfo.username : null}
                </Avatar>
            );
        }

        return (
            <Row id={'indexHeader'}>
                <Col span={1}>
                    {
                        this.props.collapsed ?
                            <Icon type="menu-fold" className={'menuCollapsedBtn'}
                                  onClick={this.props.collapsedLayout.bind(this)}/> :
                            <Icon type="menu-unfold" className={'menuCollapsedBtn'}
                                  onClick={this.props.collapsedLayout.bind(this)}/>
                    }

                </Col>
                <Col span={11} style={{height:'100%'}}>
                    <Breadcrumb>
                        <Breadcrumb.Item>首页</Breadcrumb.Item>
                        {
                            this.props.showComponentPath == null ? null :
                                this.props.showComponentPath.map((item, key) => {
                                    return <Breadcrumb.Item key={item}>{item}</Breadcrumb.Item>
                                })
                        }
                    </Breadcrumb>
                </Col>
                <Col span={12}>
                    <span className={'rightBlock'}>
                        <Popover placement="bottomRight"
                                 title={this.props.userInfo ? this.props.userInfo.username : null}
                                 content={headerImageActionContent}
                        >
                            {headAvatar}
                        </Popover>
                    </span>
                </Col>
            </Row>
        );
    }

    logout() {
        ajax.get("/authority/logout")
            .then((response) => {
                saveValue("token", null);
                saveValue("refresh_token", null);
                saveValue("username", null);
                window.location.reload();
            })
            .catch((error) => {
                message.error("退出登录失败");
            });
    }
}


const mapStateToProps = (state) => {
    return {
        username: state.username,
        userInfo: state.userInfo,
        showComponent: state.showComponent,
        collapsed: state.collapsed,
        showComponentPath: state.showComponentPath,
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        loadEditUserInfo: function (userInfo) {
            // let TargetComponent = ComponentUtil.loadComponent('../pages/header/EditUserInfo');

            dispatch({
                type: show_component,
                showComponent: null,
                showComponentPath: ['个人信息']
            });
            this.props.history.push({pathname: "/header/EditUserInfo", query: {userInfo: this.props.userInfo}});
        },
        collapsedLayout: function () {
            dispatch({
                type: collapsed_layout
            });
        }
    }
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header));